import LoadingTpl from './loading.vue'

// 创建 Loading 
const loading = {
  install: (Vue) => { //  Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
    // 创建组件  使用组件构造器
    const Loading = Vue.extend(LoadingTpl)

    // new 一个组件,相当于 把刚刚创建的组件，放到 Vue 上
    const loadingComponent = new Loading()

    // 得到这个组件的 模板  语法：组件.$mount().$el
    const tpl = loadingComponent.$mount().$el

    // 将这个 模板 放到 body 里面的孩子里面
    document.body.appendChild(tpl)

    // 定义方法
    // $showLoading 调用的时候，自动产生全局的 mask+loading 动画
    // $hideLoading 调用的时候，关闭 loading
    Vue.prototype.$showLoading = () => {
      loadingComponent.showLoading = true
    }
    Vue.prototype.$hideLoading = () => {
      loadingComponent.showLoading = false
    }
  }
}

// 导出后，去 main.js 里面使用
export default loading
